import React, { Component } from "react"
import { connect } from "react-redux"

import {useParams,useLocation,useNavigate}  from "react-router-dom"

function withRouter(Component) {
    return (props) => (
      <Component
        {...props}
        params={useParams()}
        location={useLocation()}
        navigate={useNavigate()}
      />
    );
  }

class Twoc extends Component {
    constructor() {
        super()
        this.state = {
            arr: [
                { "id": 1, "name": "苹果", "price": 10 },
                { "id": 2, "name": "橘子", "price": 20 },
                { "id": 3, "name": "香蕉", "price": 30 },
                { "id": 4, "name": "西瓜", "price": 40 },
            ]
        }
    }
    render() {
        return (
            <div>
                <h1> 商品是 ：{this.state.arr[this.props.params.id - 1].id} -- {this.state.arr[this.props.params.id - 1].name} ---{this.state.arr[this.props.params.id - 1].price}</h1>
{console.log(this.props)}

                <button onClick={() => {

                    this.props.add(this.state.arr[this.props.params.id - 1])
                    this.props.navigate('/three')
                }}> 加入购物车</button>
            </div>
        )
    }
}
const mapDispatchToProps=(dispatch)=>{
    return {
        "add":(m)=>dispatch({"type":"jia","obj":m})
    }
}
export default connect(
    null,
    mapDispatchToProps
)(withRouter(Twoc));
